<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-02-12 16:29:45"
-->
<template>
  <v-menu offset-y>
    <template v-slot:activator="{ on }">
      <v-text-field v-on="on" :value="value" @input="inputHandle"></v-text-field>
    </template>
    <v-row no-gutters>
      <v-col>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index">
            <v-list-item-title>{{ item.text }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-col>
      <v-col>
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index">
            <v-list-item-title>1{{ item.text }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-col>
    </v-row>
  </v-menu>
</template>
<script>
export default {
  name: 'FormCascaderComponent',
  props: {
    items: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  data: function () {
    return {
      value: ''
    }
  },
  created: function () {
  },
  computed: {
    children: function() {
      const c = this.items.find(e => { return e.value === this.select })
      if ((typeof c) === 'object' && c.hasOwnProperty('children')) {
        return c.children
      } else {
        return []
      }
    }
  },
  methods: {
    inputHandle: function(val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style scoped>
</style>
